<template>
	<section class="promotionLinkBox" >
		<el-form ref="customer" label-position="top" :inline="true" class="demo-form-inline">
            <el-row>
				<el-col :span="4">
                    <el-form-item label="客户名称:">
                        <el-input placeholder="客户名称" v-model="filter.customerName" size="medium"></el-input>
                    </el-form-item>
                </el-col>
				<el-col :span="4">
                    <el-form-item label="手机号码:">
                        <el-input placeholder="手机号码" v-model="filter.Tel" size="medium"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                	<el-form-item label="渠道:">
                        <el-select v-model="filter.channel" size="medium">
						    <el-option
						      v-for="item in channelOptions"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						</el-select>
					</el-form-item>
                </el-col>
                <el-col :span="4">
                	<el-form-item label="注册时间:" width="100">
	                    <el-date-picker
	                    	size="medium"
	                    	style="width: 100%;"
						    v-model="datePicker"
						    type="datetimerange"
							start-placeholder="开始日期"
							end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
                </el-col>
           </el-row>
           <el-row>
           		<el-col :span="12" class="action_col">
                    <el-form-item class="action_button_group_open">
                        <el-button size="small" type="primary" @click="empty"><i class="fa fa-trash-o fa-lg"></i> 清空筛选条件
                        </el-button>
                        <el-button size="small" type="primary" @click="promotionLink" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-col>
           </el-row>
           <el-row>
				<el-col :span='24' class="hide_and_show">
					<el-form-item class="action_button_group_open">
						<a size="small" @click="exportData()" class="export">
							<el-button size="small" icon="el-icon-zoom-in">导出</el-button>
						</a>
					</el-form-item>
				</el-col>
			</el-row>
           
           <el-row class="margin-table">
                <el-table :data="tableList" @selection-change="handleSelectionChange" v-model="tableList" style="width: 100%;" border>
					<el-table-column type="selection" width="55" className="asd" fixed></el-table-column>
	                <el-table-column prop="name"  label="客户名称" align='center' min-width="130">
						<template scope="scope">
                            <a :title="scope.row.name">{{scope.row.name}}</a>
                        </template>
					</el-table-column>
					<el-table-column prop="phone" label="手机号码" align='center' min-width="130" ></el-table-column>
	                <el-table-column prop="channel"  label="渠道" align='center' min-width="130"></el-table-column>
					<el-table-column prop="postIp" label="IP" align='center' min-width="130"></el-table-column>
	                <el-table-column prop="referer" label="推广链接" align='center' min-width="200">
						<template scope="scope">
                            <a :title="scope.row.referer">{{scope.row.referer}}</a>
                        </template>
					</el-table-column>
	                <el-table-column prop="trackId" label="TrackID" align='center' min-width="200">
						<template scope="scope">
                            <a :title="scope.row.trackId">{{scope.row.trackId}}</a>
                        </template>
					</el-table-column>
	                <el-table-column prop="content" label="备注" align='center' min-width="200">
						<template scope="scope">
                            <a :title="scope.row.content">{{scope.row.content}}</a>
                        </template>
					</el-table-column>
	                <el-table-column prop="gmtCreate" label="申请时间" align='center' min-width="200">
	                	<template scope="scope">
                            <a :title="scope.row.gmtCreate">{{scope.row.gmtCreate | formatUpdateTime}}</a>
                        </template>
	                </el-table-column>
                </el-table>
            </el-row>
		    <el-row class="paging" style='margin-top: 40px;'>
		        <el-pagination
                  @current-change="handleCurrentChange"
                  @size-change="handleSizeChange"
                  :current-page="pagingUserData.pageNum"
                  :page-sizes="pagingUserData.pageSizes"
                  :page-size="filter.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pagingUserData.total">
		        </el-pagination> 
      		</el-row>
        </el-form>
	</section>
</template>

<script>
	import Vue from 'vue'
	import { Row, Col, Form, FormItem,Input,Button,Select,Option,DatePicker,Table,TableColumn,Pagination,Message,MessageBox} from 'element-ui';
	import {channelOptionsWQT,RSOptions,pagesOptions} from '~/assets/js/option_dataCharts';
	import { mapGetters, mapActions, mapMutations } from 'vuex';
	import { getDate, setToken, getCookie,validTel} from '../../utils/auth';
	import { PROMOTIONAL_TOTALCOUNT, PROMOTIONAL_CURRENTPAGE, PROMOTIONAL_PAGESIZE } from '../../store/mutation-types/promotionLink/index.js'

	Vue.use(Row);
	Vue.use(Col);
	Vue.use(Form);
	Vue.use(FormItem);
	Vue.use(Input);
	Vue.use(Button);
	Vue.use(Select);
	Vue.use(Option);
	Vue.use(DatePicker);
	Vue.use(Table);
	Vue.use(TableColumn);
	Vue.use(Pagination);
	
	Vue.prototype.$message = Message;
    Vue.prototype.$confirm = MessageBox.confirm;
	export default {
		head(){
            return {
                title: this.title,
            }
        },
		data() {
			return {
				tabName: '推广日志',
				title: "推广日志",
				filter:{
					customerName:'',//客户名称
	      			channel:'',//渠道
	      			Tel:'',//手机号码
					applyTimeBegin:'',//查询开始时间
		        	applyTimeEnd:'',//查询结束时间
	      			pageSize: 10, // 每页条数
					pageNum: 1,
      		  	},
      		  	pagingUserData: {
                    pageSizes: [10, 20, 50],	// 每页可选条数列表,
                    total: 0,
                    pageNum: 1
                },
				channelOptions:channelOptionsWQT,
				RSoptions:RSOptions,
				datePicker:[],//查询时间
				pagesOptions:pagesOptions,
				tableList:[],
				logPreload:{},
				multipleSelection: [],      // checkbox选中客户列表数据
			}
		},


		computed: {
			...mapGetters({
				'pageTabsList': 'getPageTabsList',
                'currentPage': 'currentPageShopManage',
                'totalCount': 'totalCountShopManage',
                'pageSize': 'pageSizeShopManage',
			})
		},
		filters: {
            formatUpdateTime(time) {
                if(!time) return '';
                let date = new Date(time);
                return getDate(date,true)
            },
            formatAudioTime(value) {
                let min = Math.floor(value/60);
                let sec = value%60;
                return min+"分 "+sec+"秒"
            }
        },
		methods: {
			handleSelectionChange(val){
				let ids = [];
                for (let i = 0; i < val.length; i++) {
                    ids.push(val[i].id);
                }
                this.multipleSelection = ids;
			},


			handleCurrentChange(val) {
				this.filter.pageNum = val;
        		this.getPromotionLink()
	        },
	        handleSizeChange(val) {
	        	this.filter.pageSize = val;
				this.filter.pageNum = 1;
				this.getPromotionLink();
	        },
	        empty(){
				this.filter={
					customerName:'',//客户名称
					channel:'',//渠道
	      			Tel:'',//手机号码
					applyTimeBegin:'',//查询开始时间
		        	applyTimeEnd:'',//查询结束时间
	      			pageSize: 10, // 每页条数
					pageNum: 1
				},
				this.datePicker=[]//查询时间
			},
			promotionLink(){
				this.getPromotionLink();
			},
			getPromotionLink(){
//				if(this.filter.Tel && validTel(this.filter.Tel) == false) {
//                  Message.warning({
//                      message: '手机号码格式不正确'
//                  });
//                  return;
//              }
				if(this.datePicker&&this.datePicker[0]){
	    			this.filter.applyTimeBegin = this.datePicker[0]?getDate(this.datePicker[0],true):'';
                    this.filter.applyTimeEnd =  this.datePicker[1]?getDate(this.datePicker[1],true):'';
	    		}else{
					this.filter.applyTimeBegin = ''
					this.filter.applyTimeEnd = ''
				}
	    		this.logPreload = {
					name:this.filter.customerName,
    				channelId:this.filter.channel,
    				phone:this.filter.Tel,
    				startTime:this.filter.applyTimeBegin,
    				endTime:this.filter.applyTimeEnd,
    				pageNum: this.filter.pageNum,
        			pageSize: this.filter.pageSize,
	    		}
	    		this.$store.dispatch('getpromotionalLogList',this.logPreload).then((response) => {
		            if(!response){return}
					let result = response.data;
		            if (result.successed && result.successed == true) {
		              	this.tableList=result.data.list;
		              	this.pagingUserData.total = result.data.total;
                        this.pagingUserData.pageNum = result.data.pageNum > 0 ? result.data.pageNum : 1;
		            }
		          })
		          .catch((error) => {
		            Message.error({
		              message: result.message
		            });
		          });
			},
			exportData(){
				if (this.multipleSelection == '') {
                    this.$message.error('请先选择客户');
                    return;
                }
				if(this.pagingUserData.total <=0){
                    this.$message({type: 'error',message: '数据条目需大于零！'});
                    return;
                }
                
                let arr = [];
                let key;
                var token = window.localStorage.getItem('token');
                for(key in this.logPreload){
                    arr.push(key+'='+this.logPreload[key])
                }
                arr.push('total='+this.totalCount);
                arr.push('token='+token);
                arr.push('ids='+this.multipleSelection);
                var p =arr.join("&");
                var a = document.createElement('a');
                a.href = process.env.baseUrl + '/track/list/down?'+p;
                //a.target = '_blank';
                a.id='exppub';
                document.body.appendChild(a);
                var alink = document.getElementById('exppub');
                alink.click();
                alink.parentNode.removeChild(a);
			}
		},
		created() {
			//pageTab
			if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
		},
		mounted() {
			this.getPromotionLink()
		}
	}
</script>

<style lang="scss">
		.promotionLinkBox{
			margin-top: 20px;
			a, a:hover, a:focus, a:visited{
				color: #20a0ff;
				-webkit-text-decoration-line: underline;
				text-decoration-line: underline; 
			}
			.margin-table {
				.el-icon-close{padding-right: 20px;}
				.input_text .el-input__inner{padding-right: 25px;}
			}
			.module-opera-top{
				.el-form-item{margin-bottom: 50px !important;}
			}
			.el-form--inline .el-form-item__label{
				float: left !important;
			}
			.el-pagination__editor{
				width: 50px !important;
			}
			.el-form {
				.el-form-item {
					width: 90%
				}
			}
			.el-table .cell{
				white-space: nowrap !important;
				a{
					text-decoration: none;
					color: #333;
				}
			}
		}
</style>